<script setup>
import {ref, reactive, onMounted} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessageBox} from 'element-plus';
import {getSettingApi, setSettingApi} from '@/service/setting.js';
import UploadImage from '@/components/upload-image.vue';

const router = useRouter();

const state = reactive({
  website: {
    name: '',
    logo: '',
    keyword: '',
    description: '',
    icp: ''
  },
  login: {
    white: '',
    black: '',
    message_code: 0,
    image_code: 0,
    incorrect_times: 0
  },
  upload: {
    ext: "png,jpg,jpeg,gif,bmp,csv,xls,xlsx",
    size: 2048000,
    catalog: "./uploads",
    compress: 0,
    cdn: "",
    filename: "hash",
  },
  text_message: {
    access_key_id: '',
    access_key_secret: ''
  },
  work_wechat: {
    agent_id: '',
    corp_id: '',
    secret: '',
    redirect_uri: '',
    admin: ''
  },
  official_account: {
    appid: "",
    secret: "",
    token: "",
    aes_key: "",
  },
  mini_program: {
    appid: "",
    secret: ""
  }
});

const activeName = ref('website');
// 动态计算fileList
const fileList = ref([]);
const doSubmit = (type) => {
  if (!state[type]) {
    console.error(`Invalid type: ${type}`);
    return;
  }
  console.log('state[type]', state[type]);
  const options = {
    type: type,
    data: state[type]
  };
  console.log(options)

  setSettingApi(options).then(response => {
    if (response.code === 200) {
      ElMessageBox.alert('保存成功', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          getSetting();
        }
      });
    }
  });
};

const getSetting = async () => {
  const response = await getSettingApi();
  if (response.code === 200) {
    Object.assign(state, response.data);
    // 设置fileList
    fileList.value = [
      {
        name: 'Logo',
        url: response.data.website.logo
      }
    ];
    console.log('fileList', fileList);
  }
};

const handleUploadSuccess = (response, file, fileList) => {
  console.log('上传成功', response, file, fileList);
  state.website.logo = response.data.path;
  fileList.value = [
    {
      name: 'Logo',
      url: response.data.path
    }
  ];
};

onMounted(() => {
  getSetting();
});


</script>

<template>
  <el-main>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基本设置" name="website">
        <el-form :model="state.website" ref="websiteForm" label-width="120px" label-position="left"
                 class="demo-ruleForm">
          <el-form-item label="系统名称" prop="name">
            <el-input v-model="state.website.name" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="Logo" prop="logo">
            <upload-image :multiple="false" :limit="1" :file-list="fileList"
                          @upload-success="handleUploadSuccess"></upload-image>
          </el-form-item>
          <el-form-item label="关键字" prop="keyword">
            <el-input v-model="state.website.keyword" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input type="textarea" v-model="state.website.description" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="ICP" prop="icp">
            <el-input v-model="state.website.icp"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="doSubmit('website')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="登录限制" name="login">
        <el-form :model="state.login" ref="loginForm" label-width="120px" label-position="left" class="demo-ruleForm">
          <el-form-item label="白名单" prop="white">
            <el-input type="textarea" v-model="state.login.white" placeholder="不同IP请换行"></el-input>
          </el-form-item>
          <el-form-item label="黑名单" prop="black">
            <el-input type="textarea" v-model="state.login.black" placeholder="不同IP请换行"></el-input>
          </el-form-item>
          <el-form-item label="短信验证码" prop="message_code">
            <el-select v-model="state.login.message_code">
              <el-option label="开启" :value="1"></el-option>
              <el-option label="关闭" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图片验证码" prop="image_code">
            <el-select v-model="state.login.message_code">
              <el-option label="开启" :value="1"></el-option>
              <el-option label="关闭" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="错误次数" prop="incorrect_times">
            <el-input v-model="state.login.incorrect_times" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSubmit('login')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="上传限制" name="upload">
        <el-form :model="state.upload" ref="uploadForm" label-width="120px" label-position="left" class="demo-ruleForm">
          <el-form-item label="格式限制" prop="ext">
            <el-input v-model="state.upload.ext" placeholder="逗号隔开"></el-input>
          </el-form-item>
          <el-form-item label="文件大小" prop="size">
            <el-input v-model="state.upload.size" placeholder="字节"></el-input>
          </el-form-item>
          <el-form-item label="CDN" prop="cdn">
            <el-input v-model="state.upload.cdn" placeholder="cdn"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSubmit('upload')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="短信配置" name="text_message">
        <el-form :model="state.text_message" ref="textMessageForm" label-width="120px" label-position="left"
                 class="demo-ruleForm">
          <el-form-item label="APPKey" prop="access_key_id">
            <el-input v-model="state.text_message.access_key_id" placeholder="阿里云短信配置"></el-input>
          </el-form-item>
          <el-form-item label="APPSecret" prop="access_key_secret">
            <el-input v-model="state.text_message.access_key_secret" placeholder="阿里云短息配置"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSubmit('text_message')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="企业微信" name="work_wechat">
        <el-form :model="state.work_wechat" ref="workWechatForm" label-width="120px" label-position="left"
                 class="demo-ruleForm">
          <el-form-item label="AgentId" prop="agent_id">
            <el-input v-model="state.work_wechat.agent_id" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="CorpId" prop="corp_id">
            <el-input v-model="state.work_wechat.corp_id" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="Secret" prop="secret">
            <el-input v-model="state.work_wechat.secret" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="RedirectUri" prop="redirect_uri">
            <el-input v-model="state.work_wechat.redirect_uri" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="Admin" prop="admin">
            <el-input v-model="state.work_wechat.admin" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSubmit('work_wechat')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="公众号配置" name="official_account">
        <el-form :model="state.official_account" ref="officialAccountForm" label-width="120px" label-position="left"
                 class="demo-ruleForm">
          <el-form-item label="AppId" prop="appid">
            <el-input v-model="state.official_account.appid" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="AppSecret" prop="secret">
            <el-input v-model="state.official_account.secret" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="Token" prop="token">
            <el-input v-model="state.official_account.token" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="AesKey" prop="aes_key">
            <el-input v-model="state.official_account.aes_key" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSubmit('official_account')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="小程序配置" name="mini_program">
        <el-form :model="state.mini_program" ref="miniProgramForm" label-width="120px" label-position="left"
                 class="demo-ruleForm">
          <el-form-item label="AppId" prop="appid">
            <el-input v-model="state.mini_program.appid" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="APPSecret" prop="secret">
            <el-input v-model="state.mini_program.secret" placeholder=""></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSubmit('mini_program')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </el-main>
</template>

<style scoped lang="less">

</style>
